<template>
  <!--主体内容区域-->
  <el-row class="content">
    <!--  左边区域-->
    <el-col class="con_left" :span="19">
      <!--    左边头部-->
      <el-row class="header">
        <el-col class="logo" :span="9">
          <dv-border-box-4 :color="[ 'green']" class="border-box-4">
            <dv-border-box-4 :reverse="true" :color="[ 'green']" style="overflow:hidden">
              <dv-border-box-8 class="box-8" style="overflow:hidden">
                <span class="title1">湖北交投智慧高速交通态势</span>
                <span class="title2">Intelligent high speed traffic situation monitoring</span>
              </dv-border-box-8>
            </dv-border-box-4>
          </dv-border-box-4>
        </el-col>
        <el-col class="time" :span="15">
          <div style="display: flex;flex-direction: row;overflow:hidden;">
            <dv-decoration-11
              class="de-decoration11"
              @click.native="realTime"
              :color="[colorChange]"
            >实时
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fiveTime"
              :color="[colorChange1]"
            >5min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fifTime"
              :color="[colorChange2]"
            >15min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="threeTime"
              :color="[colorChange3]"
            >30min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="firstTime"
              :color="[colorChange4]"
            >1h
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="secondTime"
              :color="[colorChange5]"
            >2h
            </dv-decoration-11>
          </div>
        </el-col>
      </el-row>
      <!--    左边内容-->
      <el-row class="section">
        <el-col class="left" :span="6">
          <div class="realtime">
            <dv-decoration-3 class="decoration-3"/>
            <dv-border-box-11 title="交通实时态势" :color="[ 'green']" style="overflow:hidden;">
              <dv-decoration-9>
                <span>拥堵指数</span>
                <span>{{parseFloat(jamsTotalRate)}}</span>
              </dv-decoration-9>
              <!--     <leftRealDataCharts4 /> -->
              <div class="realtime_item">
                <div class="item">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">车流量 {{trafficRealTImeList.carNum}}辆</span>
                </div>
                <div class="item">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">平均速度 {{trafficRealTImeList.avgSpeed}}</span>
                </div>
                <div class="item">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">拥堵里程 {{trafficRealTImeList.jamsTotal}}</span>
                </div>
                <div class="item">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">高速总里程数 {{trafficRealTImeList.total}}</span>
                </div>
              </div>
            </dv-border-box-11>
          </div>
          <div class="traffic">
            <dv-border-box-9 style="overflow:hidden;" :color="[ 'green']">
              <leftCongestionChart :rateDatas="rateDatas"/>
            </dv-border-box-9>
          </div>
        </el-col>
        <el-col class="right" :span="18">
          <div class="map">
            <mapOfHuBei/>
            <dv-decoration-7 class="eventName" :color="['green','green']">事件清单</dv-decoration-7>
            <el-row>
              <el-col :span="12" class="border-box">
                <dv-border-box-8>
                  <event :selectEvenits="selectEvenits"/>
                </dv-border-box-8>
              </el-col>
              <el-col :span="12" class="border-box1">
                <dv-border-box-8 :reverse="true">
                  <eventVideo :eventVideos="eventVideos"/>
                </dv-border-box-8>
              </el-col>
            </el-row>
            <div class="border-boxRight1" align="left">
              <span class="first"></span>
              <span class="first1">畅通</span>
            </div>
            <div class="border-boxRight2" align="left">
              <span class="second"></span>
              <span class="second1">基本畅通</span>
            </div>
            <div class="border-boxRight3" align="left">
              <span class="three"></span>
              <span class="three1">轻度拥堵</span>
            </div>
            <div class="border-boxRight4" align="left">
              <span class="four"></span>
              <span class="four1">中度拥堵</span>
            </div>
            <div class="border-boxRight5" align="left">
              <span class="five"></span>
              <span class="five1">重度拥堵</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <!--  右边区域-->
    <el-col class="con_right" :span="5">
      <!--    基础信息展示-->
      <div class="basic_info">
        <div style="display: flex;flex-direction: row">
          <dv-decoration-1 class="dv-decoration-1"/>
          <dv-decoration-1 class="decoration-1"/>
        </div>
        <basicInfo :selectBasics="selectBasics"/>
      </div>
      <div class="traffic_top10">
        <dv-border-box-8>
          <rightCharts :selectSections="selectSections"/>
        </dv-border-box-8>
      </div>
      <div class="flow_top10">
        <dv-border-box-8 :reverse="true">
          <rightCharts2 :selectFlows="selectFlows"/>
        </dv-border-box-8>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// 导入组件
import leftRealDataCharts from '@/views/home/components/leftRealDataCharts'
import leftCongestionChart from '@/views/home/components/leftCongestionChart'
import basicInfo from '@/views/home/components/basicInfo'
import rightCharts from '@/views/home/components/rightCharts'
import rightCharts2 from '@/views/home/components/rightCharts2'
import event from '@/views/home/components/event'
import eventVideo from '@/views/home/components/eventVideo'
import mapOfHuBei from '@/views/home/components/mapOfHuBei'
// 导入接口请求函数
import {
  trafficRealTIme,
  selectBasics,
  selectSection,
  selectFlow,
  selectEvenit,
  addTrafficRealTime,
  trafficMapType,
  trafficJamsRate,
  cameraInfoList
} from './../../api/index'

export default {
  name: 'Home',
  data () {
    return {
      trafficRealTImeList: {},
      selectBasics: {},
      selectSections: [],
      selectFlows: [],
      selectEvenits: [],
      colorChange: '#60cda0',
      colorChange1: '',
      colorChange2: '',
      colorChange3: '',
      colorChange4: '',
      colorChange5: '',
      rateDatas: {},
      mapIdArr: [],
      jamsTotalRate: '',
      eventVideos: [],
      timer: null
    }
  },
  created () {
    this.getSelectBasics()
    this.getTrafficRealTime()
    this.getTrafficJamsRate()
    this.getSelectSection() // 获取查看拥堵top10
    this.getSelectFlow() // 获取查看路段流量top10
    this.getSelectEvenit()
    this.getCameraInfoList()
    this.getTrafficMapTypeData()
    this.getRealTimeData()
  },
  components: {
    leftRealDataCharts, // 交通实时态势
    leftCongestionChart, // 上周和本周拥堵指数
    basicInfo, // 基础信息
    rightCharts,
    rightCharts2,
    mapOfHuBei,
    event,
    eventVideo
  },
  methods: {
    // 获取基础信息
    getSelectBasics () {
      selectBasics().then(res => {
        if (res.data) {
          this.selectBasics = res.data
        }
      })
    },
    // 获取交通实时数据
    getRealTimeData () { // 一上来直接直接调用实时态势函数
      trafficRealTIme().then(res => {
        if (res.data) {
          this.trafficRealTImeList = res.data
          console.log(this.trafficRealTImeList)
          this.jamsTotalRate = res.data.jamsTotalRate
        }
      })
    },
    // 定时获取获取交通实时数据
    getTrafficRealTime () {
      setInterval(() => {
        trafficRealTIme().then(res => {
          if (res.data) {
            this.jamsTotalRate = res.data.jamsTotalRate
          }
        })
      }, 5000)
    },
    // 上周和本周拥堵指数
    getTrafficJamsRate () {
      trafficJamsRate().then(res => {
        if (res.data) {
          this.rateDatas = res.data
        }
      })
    },
    // 拥堵路段排行
    getSelectSection () {
      selectSection().then(res => {
        if (res.data) {
          this.selectSections = res.data
        }
      })
    },
    // 流量排行
    getSelectFlow () {
      selectFlow().then(res => {
        if (res.data) {
          this.selectFlows = res.data
        }
      })
    },
    // 人工事件清单
    getSelectEvenit () {
      selectEvenit().then(res => {
        if (res.data) {
          this.selectEvenits = res.data
        }
      })
    },
    // 视频事件清单
    getCameraInfoList () {
      cameraInfoList().then(res => {
        this.eventVideos = res.data
      })
    },
    // 获取地图路况信息
    getTrafficMapTypeData () {
      trafficMapType().then(res => {
        this.mapIdArr = res.data
        // console.log(this.mapIdArr)
        for (var i = 0; i < this.mapIdArr.length; i++) {
          const item = this.mapIdArr[i]
          // console.log(item.level)
          // console.log(document.getElementById(item.id))
          if (item.level === '0') {
            document.getElementById(item.id).setAttribute('stroke', '#d7c83c')
          } else if (item.level === '1') {
            document.getElementById(item.id).setAttribute('stroke', '#d7c83c')
          } else if (item.level === '2') {
            document.getElementById(item.id).setAttribute('stroke', '#f80001')
          }
        }
      })
    },
    realTime () {
      this.colorChange = '#60cda0'
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    fiveTime () {
      this.colorChange = ''
      this.colorChange1 = '#60cda0'
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    fifTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = '#60cda0'
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    threeTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = '#60cda0'
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    firstTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = '#60cda0'
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    secondTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = '#60cda0'
      this.getTrafficMapTypeData()
    }
  }
}
</script>

<style scoped lang="less">
  @import "src/assets/style/mixin";

  .content {
    .wh(100%, 100%);
    background: radial-gradient(rgba(2, 34, 195, 1), rgba(12, 20, 58, 1));
    overflow: hidden;

    .con_left {
      .header {
        height: 15vh;
        font-size: 24px;

        .logo {
          height: 100%;

          .border-box-4 {
            /*margin-top: 10px;*/
            /*overflow: hidden;*/
          }

          .title1 {
            margin-top: 30px;
            text-align: center;
            display: block;
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            font-family: '\5FAE\8F6F\96C5\9ED1', serif;
            //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
            //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
            text-shadow: rgba(255, 255, 255, 0.4) 0 3px 4px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
          }

          .title2 {
            margin-top: -10px;
            display: block;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            color: #fff;
          }
        }

        .time {
          .de-decoration11 {
            margin-top: 45px;
            .wh(160px, 80px);
            font-size: 30px;
            font-weight: 900;
            color: #60cda0;
            cursor: pointer;
          }

          .decoration11 {
            margin-top: 52px;
            width: 150px;
            height: 65px;
            font-size: 25px;
            font-weight: 600;
            color: #60cda0;
            cursor: pointer;
          }

        }
      }

      .section {
        .wh(100%, 85vh);
        /*background-color: orange;*/

        .left {

          .realtime {
            height: 42.5vh;
            position: relative;

            .decoration-3 {
              .wh(100%, 10px);
            }

            .decoration-7 {
              width: 100%;
              height: 30px;
              color: #fff;
              font-weight: 900;
              font-size: 18px;
              margin-top: 2px;
            }

            .imgs01 {
              .wh(50px, 30px);
              margin-left: 90px;
              margin-top: 2px;
            }

            // 实时态势旋转显示数据区域
            .dv-decoration-9 {
              .wh(180px, 180px);
              position: absolute;
              left: 50%;
              top: 20%;
              transform: translateX(-50%);
              color: #fff;
              font-size: 24px;
              font-weight: 600;
              .flex(column);
              flex-wrap: wrap;
            }

            .realtime_item {
              position: absolute;
              /*left: 30%;*/
              top: 65%;
              /*transform: translateX(-50%);*/
              .flex(column);
              justify-content: center;

              .item {
                .flex();
              }
            }
          }

          .traffic {
            height: 42.5vh;
          }
        }

        .right {
          height: 100%;

          .map {
            width: 100%;
            height: 100%;

            .eventName {
              position: absolute;
              z-index: 9;
              bottom: 230px;
              width: 200px;
              height: 20px;
              color: white;
              font-style: initial;
              font-size: 18px;
              margin-left: -40px;
              font-weight: bolder;
              font-family: "\\5FAE\8F6F\96C5\9ED1";
            }

            .border-box {
              position: absolute;
              z-index: 9;
              bottom: 5px;
              height: 220px;
            }

            .border-box1 {
              position: absolute;
              z-index: 9;
              bottom: 5px;
              left: 50%;
              height: 220px;
              /*margin-left: 51%;*/
            }

            .border-boxRight1 {
              width: 130px;
              height: 5px;
              right: 30px;
              position: absolute;
              z-index: 999;
              top: 20px;
              display: flex;
              flex-direction: row;

              .first {
                width: 50px;
                background-color: #00842c;
                height: 100%;
                border-radius: 5px;
                border: 1px solid #00842c;
              }

              .first1 {
                flex: 1;
                margin-left: 5px;
                margin-top: -8px;
                color: #fff;
              }
            }

            .border-boxRight2 {
              width: 130px;
              height: 5px;
              right: 30px;
              position: absolute;
              z-index: 999;
              top: 50px;
              .flex();

              .second {
                background-color: #98ff69;
                width: 50px;
                height: 100%;
                border-radius: 5px;
                border: 1px solid #98ff69;
                display: inline-block;
              }

              .second1 {
                color: white;
                flex: 1;
                height: 100%;
                margin-left: 5px;
                margin-top: -8px;
              }
            }

            .border-boxRight3 {
              .wh(130px, 5px);
              right: 30px;
              position: absolute;
              z-index: 999;
              top: 80px;
              .flex();

              .three {
                background-color: #feff5f;
                width: 50px;
                height: 100%;
                border-radius: 5px;
                border: 1px solid #feff5f;
                display: inline-block;
              }

              .three1 {
                color: white;
                flex: 1;
                height: 100%;
                margin-left: 5px;
                margin-top: -8px;
              }
            }

            .border-boxRight4 {
              width: 130px;
              height: 5px;
              right: 30px;
              position: absolute;
              z-index: 999;
              top: 110px;
              .flex();

              .four {
                background-color: #ffed4f;
                width: 50px;
                height: 100%;
                border-radius: 5px;
                border: 1px solid #ffed4f;
                display: inline-block;
              }

              .four1 {
                color: white;
                flex: 1;
                height: 100%;
                margin-left: 5px;
                margin-top: -8px;
              }
            }

            .border-boxRight5 {
              width: 130px;
              height: 5px;
              right: 30px;
              position: absolute;
              z-index: 999;
              top: 140px;
              .flex();

              .five {
                background-color: #f12039;
                width: 50px;
                height: 100%;
                border-radius: 5px;
                border: 1px solid #f12039;
                display: inline-block;
              }

              .five1 {
                color: white;
                flex: 1;
                height: 100%;
                margin-left: 5px;
                margin-top: -8px;
              }
            }

          }
        }
      }
    }

    .con_right {
      /*background-color: purple;*/

      .basic_info {
        height: 20vh;

        .dv-decoration-1 {
          width: 50%;
          height: 30px;
          margin-top: 30px;
        }

        .decoration-1 {
          width: 50%;
          height: 30px;
          margin-top: 30px;
          margin-right: 10px;
        }
      }

      .traffic_top10 {
        height: 40vh;
      }

      .flow_top10 {
        height: 40vh;
      }
    }
  }

</style>
